<template>
	<div class="Login">
		<!-- 文字开始 -->
		<div class="text1">软件协会</div>
		<div class="text2">愿天堂不会让我心动</div>
		<!-- 文字结束 -->

		<!-- 底部文字开始 -->
		<!-- <div class="text3">帮助中心&nbsp;&nbsp;&nbsp;&nbsp;|</div>
	  <div class="text4">
	      <a href="#"><img src="img/download.png" alt=""></a>
	  </div>
	  <div class="text5">2021@Baidu</div> -->
		<!-- 底部文字结束 -->
         
		<!-- 表单开始 -->
		<div id="form-info">
			<el-form  size="medium" label-width="80px" :model="formLabelAlign">
				<div id="register">欢迎登录</div>
				<div class="form-item">
					<el-form-item label="用户名" prop="name">
						<el-input v-model="formLabelAlign.userName" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="formLabelAlign.password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item label="验证码">
						<el-input v-model="formLabelAlign.type" placeholder="请输入用户名"></el-input>
					</el-form-item>
				</div>
				<div id="register">
					<input class="register" @click="Login" type="button" value="登录" />
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import store from '../store'
	import {hex_md5} from '../utils/MD5.js'
	import Cookies from 'js-cookie'
	import router from '../router/routers.js'
	import { getToken,getUser } from '@/utils/auth'
	import {mapModules} from 'vuex'
	export default {
		name: 'Login',
		data() {
			return {
				formLabelAlign: {
					userName:'admin',
					password:'123456'
				}
			}
		},
		watch: {

		},
		mounted() {
		},
		methods: {
			Login(){
				const h = this.$createElement;
				let userInfo=this.formLabelAlign
				if(!userInfo.userName){
					this.$message({
					  message: h('p', null, [
					    h('span', null, '请输入用户名'),
					    h('i', { style: 'color: teal' }, 'VNode')
					  ])
					});   
				    return
				}else if(!userInfo.password){
					this.$message({
					  message: h('p', null, [
					    h('span', null, '请输入密码'),
					    h('i', { style: 'color: teal' }, 'VNode')
					  ])
					}); 
					return
				}
				this.$store.dispatch('user/login', userInfo).then(res=>{
					if(res){
						this.$router.push('/main/home')
					}
				})
				//store.dispatch('permission/generateRoutes', res)
				
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
	html {
		height: 100%;
		overflow: auto;
	}
	body{
		margin: 0;
	}
.el-form-item__label {
    width: 58px;
	margin-top: 5px;
    display: inline-block;
    font-size: 14px;
    color: #333;
    font-weight: 200;
}
	.Login{
		width:100%;
		height: 100%;
		position: absolute;
		background-image: url("http://view.jqueryfuns.com/2021/6/15/fd6344f11fcc5d1b02d6b2157043d5cb/img/reg_bg_min.jpg");
		background-size:cover;
	}

	.el-form {
		.el-form-item {
		    margin-bottom: 33px;
			margin-right: 40px;
			input{
				height: 45px;
			}
		}
	}
	.form-item{
		margin-top: 120px;
	}

	/* 文字 */
	.text1 {
		width: 200px;
		height: 50px;
		color: #fff;
		line-height: 200px;
		margin-left: 200px;
		font-size: 50px;
		font-weight: bold;
　display: inline-block /* Opera */; 
	}

	.text2 {
		width: 350px;
		height: 40px;
		color: #fff;
		line-height: 200px;
		margin-left: 240px;
		font-size: 30px;
		letter-spacing: 5px;
　display: inline-block /* Opera */; 

	}

	/* 底部文字 */
	.text3 {
		width: 80px;
		height: 15px;
		margin-left: 70px;
		margin-top: 440px;
		color: #BFC2CA;
		font-size: 14px;
		float: left;
	}

	.text4 {
		width: 80px;
		height: 15px;
		margin-left: 10px;
		margin-top: 440px;

		float: left;
	}

	.text4 img {
		width: 15px;
	}

	.text5 {
		width: 80px;
		height: 15px;
		margin-left: -30px;
		margin-top: 445px;
		color: #BFC2CA;
		font-size: 12px;
		float: left;
	}

	/* 表单 */
	#form-info {
		width: 480px;
		height: 680px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.9);
		position: absolute;
		margin: auto;
		top: 0px;
		bottom: 0px;
		right: 140px;
	}

	/* 欢迎注册 */
	#register {
		width: 480px;
		height: 50px;
		margin-left: 40px;
		margin-top: 55px;
		font-size: 36px;
		color: #000;
		font-weight: bold;
	}

	/* 已有账号 */
	#old-account {
		width: 480px;
		height: 20px;
		font-size: 14px;
		color: #9B9B9B;
		float: left;
		margin-left: 40px;

	}

	/* 登录 */

	#login {
		color: #2e58ff;
		cursor: pointer;
		text-decoration: none;
	}

	/* 输入框 */
	.input {
		height: 40px;
		margin-bottom: 15px;
		border-radius: 4px;
		border: 1px solid #E0E0E0;
		background-color: #fff;

	}

	.input1 {
		width: 340px;
		margin-left: -5px;
	}

	.input2 {
		width: 205px;
	}

	.input3 {
		width: 120px;
		cursor: pointer;

	}
	/* 表单内容样式 */
	.form {
		width: 480px;
		height: 40px;
		margin-left: 40px;
	}

	.form1 {
		margin-top: 90px;
	}

	.form2 {
		margin-top: 35px;



	}



	/* 字体 */
	label {
		width: 58px;
		/* 转换为块元素 */
		display: inline-block;
		font-size: 14px;
		color: #333;
		font-weight: 200;
	}

	.label-psw {
		letter-spacing: 15px;
	}

	.gth {
		width: 15px;
		height: 20px;
		position: absolute;
		margin-left: 370px;
		margin-top: -45px;

	}

	.gth img {
		width: 100%;
	}

	/* 注册按钮 */
	.register {
		width: 400px;
		height: 50px;
		background: #BDCEFC;
		border-radius: 25px;
		border: rgba(255, 255, 255, 0.5) 1px solid;
		color: white;
		font-size: 16px;
		margin-top: 20px;
		cursor: pointer;

	}

	.read {
		width: 330px;
		height: 10px;
		margin-left: 80px;
		margin-top: 30px;
		font-size: 12px;
		color: #666;

	}

	a {
		text-decoration: none;
		color: blue;

	}

	/* input内文字颜色 */
	input::-webkit-input-placeholder {
		color: #ccc;
	}

	/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/ 
  License: none (public domain)
*/
	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	/* HTML5 display-role reset for older browsers */
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol,
	ul {
		list-style: none;
	}

	blockquote,
	q {
		quotes: none;
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
</style>
